<template>
	<div>
		<div class="head">
			<a @click="$router.push({path: '/Otc'})" class="return"></a>
			商家管理页
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-tabs v-model="active" title-active-color="white" title-inactive-color="rgb(133, 141, 172)" style="margin: 0px 10px;" @change="getTab">
					<van-tab title="出售AIDT">
						<div style="padding: 10px 0px;font-size: 13px;">
							<div style="padding-left: 5px;padding-bottom: 5px;">发布中的出售广告</div>
							<div style="padding-top: 10px;">
								<van-card title="商品标题">
									<div slot="title" style="padding: 5px 0px;">
										<span>我想要</span>
										<span style="font-size: 16px;">在线出售</span>
										<span style="color: rgb(133, 141, 172);">(展示区：我要买入)</span>
									</div>
									<div slot="desc" style="padding-top: 3px;padding-bottom: 5px;">
										<span>固定价格</span>
									</div>
									<div slot="price" style="padding-bottom: 5px;color: white;">
										<van-field maxlength="10" v-model="config.OTC_CONFIG_ORDER_BUY_UNIT_PRICE" readonly>
											<div slot="button" style="color: rgb(133, 141, 172);">CNY</div>
										</van-field>
										<div style="padding-top: 10px;">最小交易数量</div>
										<van-field maxlength="20" placeholder="请输入最小交易数量" v-model.trim="detailMinNum">
											<div slot="button" style="color: rgb(133, 141, 172);">枚</div>
										</van-field>
										<div style="padding-top: 10px;">最大交易数量</div>
										<van-field maxlength="20" placeholder="请输入最大交易数量" v-model.trim="detailMaxNum">
											<div slot="button" style="color: rgb(133, 141, 172);">枚</div>
										</van-field>
										<div style="padding-top: 10px;">出售数量</div>
										<van-field maxlength="20" placeholder="请输入出售数量" v-model.trim="num">
											<div slot="button" style="color: rgb(133, 141, 172);">枚</div>
										</van-field>
										<div style="padding-top: 10px;">
											<span>可用数量</span>
											<div style="padding-top: 5px;">
												<span v-text="pay">0.00</span>
												<span style="float: right;">
													<van-button class="give" @click="give">转入</van-button>
												</span>
											</div>
										</div>
										<van-field maxlength="10" :placeholder="'发布广告OTC账户最少持量 ' + config.OTC_CONFIG_ORDER_ADVERTISING_RESERVED" readonly>
											<div slot="button" style="color: rgb(133, 141, 172);">枚</div>
										</van-field>
										<div style="padding-top: 10px;">收款方式（可多选）</div>
										<div style="padding-top: 10px;" class="typeX">
											<van-checkbox v-model="checked" @click="myChangeAll">全选</van-checkbox>
											<van-checkbox-group v-model="result">
												<van-checkbox v-for="(item, index) in list3" :key="item" :name="item">
													<img src="../assets/images/zhifubaoPay.png" style="height: 25px;" v-if="item == 2" />
													<img src="../assets/images/weixinPay.png" style="height: 25px;" v-if="item == 1" />
													<img src="../assets/images/zaixianPay.png" style="height: 25px;" v-if="item == 0" />
												</van-checkbox>
											</van-checkbox-group>
										</div>
										<div align="left" style="padding-top: 60px;color: rgb(133, 141, 172);border-bottom: 1px solid rgb(76,83,106);">
											<div style="padding-bottom: 10px;">
												<span>以上付款信息将向卖家显示。如需添加，修改可到</span>
												<span style="color: #47aa69;" @click="$router.push({path: '/Pay',query: {roid: 'MerchantOrder'}})">支付账户</span>
											</div>
										</div>
										<div style="padding-top: 10px;">
											<van-button size="normal" class="van-button--info" @click="buy(1)">提交</van-button>
										</div>
									</div>
								</van-card>
							</div>
						</div>
					</van-tab>
					<van-tab title="收购AIDT">
						<div style="padding: 10px 0px;font-size: 13px;">
							<div style="padding-left: 5px;padding-bottom: 5px;">发布中的收购广告</div>
							<div style="padding-top: 10px;">
								<van-card title="商品标题">
									<div slot="title" style="padding: 5px 0px;">
										<span>我想要</span>
										<span style="font-size: 16px;">在线求购</span>
										<span style="color: rgb(133, 141, 172);">(展示区：我要卖出)</span>
									</div>
									<div slot="desc" style="padding-top: 3px;padding-bottom: 5px;">
										<span>固定价格</span>
									</div>
									<div slot="price" style="padding-bottom: 5px;color: white;">
										<van-field maxlength="10" v-model="config.OTC_CONFIG_ORDER_BUY_UNIT_PRICE" readonly>
											<div slot="button" style="color: rgb(133, 141, 172);">CNY</div>
										</van-field>
										<div style="padding-top: 10px;">最小交易数量</div>
										<van-field maxlength="20" placeholder="请输入最小交易数量" v-model.trim="detailMinNum">
											<div slot="button" style="color: rgb(133, 141, 172);">枚</div>
										</van-field>
										<div style="padding-top: 10px;">最大交易数量</div>
										<van-field maxlength="20" placeholder="请输入最大交易数量" v-model.trim="detailMaxNum">
											<div slot="button" style="color: rgb(133, 141, 172);">枚</div>
										</van-field>
										<div style="padding-top: 10px;">收购数量</div>
										<van-field maxlength="20" placeholder="请输入收购数量" v-model.trim="num">
											<div slot="button" style="color: rgb(133, 141, 172);">枚</div>
										</van-field>
										<!--<div style="padding-top: 10px;">
											<span>可用数量</span>
											<div style="padding-top: 5px;">
												<span v-text="pay">0.00</span>
												<span style="float: right;">
													<van-button class="give" @click="give">转入</van-button>
												</span>
											</div>
										</div>-->
										<!--<van-field maxlength="10" :placeholder="'发布广告OTC账户最少持量 ' + config.OTC_CONFIG_ORDER_ADVERTISING_RESERVED" readonly>
											<div slot="button" style="color: rgb(133, 141, 172);">枚</div>
										</van-field>-->
										<div style="padding-top: 10px;">收款方式（可多选）</div>
										<div style="padding-top: 10px;" class="typeX">
											<van-checkbox v-model="checked" @click="myChangeAll">全选</van-checkbox>
											<van-checkbox-group v-model="result">
												<van-checkbox v-for="(item, index) in list3" :key="item" :name="item">
													<img src="../assets/images/zhifubaoPay.png" style="height: 25px;" v-if="item == 2" />
													<img src="../assets/images/weixinPay.png" style="height: 25px;" v-if="item == 1" />
													<img src="../assets/images/zaixianPay.png" style="height: 25px;" v-if="item == 0" />
												</van-checkbox>
											</van-checkbox-group>
										</div>
										<div align="left" style="padding-top: 60px;color: rgb(133, 141, 172);border-bottom: 1px solid rgb(76,83,106);">
											<div style="padding-bottom: 10px;">
												<span>以上付款信息将向买家显示。如需添加，修改可到</span>
												<span style="color: #47aa69;" @click="$router.push({path: '/Pay',query: {roid: 'MerchantOrder'}})">支付账户</span>
											</div>
										</div>
										<div style="padding-top: 10px;">
											<van-button size="normal" class="van-button--info" @click="buy(0)">提交</van-button>
										</div>
									</div>
								</van-card>
							</div>
						</div>
					</van-tab>
					<van-tab title="商家订单">
						<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=' '>
							<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
								<div style="padding: 10px 0px;font-size: 13px;" v-for="item in list" :key="item.id">
									<van-card class="order">
										<div slot="title" style="padding: 5px 0px;font-size: 14px;" @click="quitOrder(item)">
											<span style="color: rgb(71, 170, 105);" v-if="item.typeId == 0">购买</span>
											<span v-if="item.typeId == 1">出售</span>
											<span>AIDT</span>
											<span style="font-size: 13px;float: right;color: rgb(133, 141, 172);padding-right: 5px;" v-if="item.status == 0">已下架<van-icon class="cvs" name="arrow" size="14"/></span>
											<span style="font-size: 13px;float: right;color: #47AA69;padding-right: 5px;" v-if="item.status == 1">上架中<van-icon class="cvs" name="arrow" size="14"/></span>
											<span style="font-size: 13px;float: right;color: rgb(133, 141, 172);padding-right: 5px;" v-if="item.status == 2">已完结<van-icon class="cvs" name="arrow" size="14"/></span>
										</div>
										<div slot="desc" style="padding-top: 3px;padding-bottom: 5px;color: rgb(133, 141, 172);">
											<van-row style="opacity: 0.5;">
												<van-col span="8" style="text-align: left;">
													时间
												</van-col>
												<van-col span="8" style="text-align: center;">
													数量（AIDT）
												</van-col>
												<van-col span="8" style="text-align: right;">
													交易总额（CNY）
												</van-col>
											</van-row>
											<van-row style="padding-top: 5px;">
												<van-col span="8" style="text-align: left;" v-text="item.updateTime">
													2019-06-18 15:31:25
												</van-col>
												<van-col span="8" style="text-align: center;padding-right: 10px;" v-text="Number(item.residueNum).toFixed(4)">
													5045.123456
												</van-col>
												<van-col span="8" style="text-align: right;padding-right: 10px;" v-text="Number(item.residueNum * item.unitPrice).toFixed(2)">
													34182.45
												</van-col>
											</van-row>
										</div>
										<div slot="price" style="padding: 5px 0px;font-size: 12px;color: white;">
											<span v-text="item.otcUserName">豆豆网络公司</span>
										</div>
									</van-card>
								</div>
							</van-list>
						</van-pull-refresh>
					</van-tab>
				</van-tabs>
			</div>
		</div>
		<van-popup v-model="show3" position="bottom" class="buyo">
			<div style="padding: 15px 25px;color: #3fb776;">
				<span>安全验证</span>
				<span style="font-size: 14px;color: rgb(133, 141, 172);float: right;padding-top: 3px;" @click="quit">取消</span>
			</div>
			<div style="background: rgb(40,44,62);padding: 10px 20px;">
				<div style="font-size: 14px;color: rgb(133, 141, 172);padding-bottom: 10px;">XIBRUSH资金交易密码</div>
				<van-field placeholder="请输入XIBRUSH交易密码" maxlength="6" type="password" v-model.trim="payPwd" />
				<div style="padding: 10px 0px;color: rgb(63, 183, 118);font-size: 14px;" @click="nextUpdatePayPassword">
					忘记密码？
				</div>
				<van-button size="normal" style="border-radius: 5px;background-color: rgb(60,66,84);border-color: rgb(60,66,84);color: white;" @click="isOk" :loading="load">确认</van-button>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import { Dialog } from 'vant';
	import { otc, base } from './../utils/api';
	export default {
		data() {
			return {
				config: [], // OTC 配置信息
				show3: false,
				payPwd: '',
				load: false,
				list3: [],
				result: [],
				isLoading: false,
				finished: false,
				loading: false,
				listLength: 0,
				total: 0,
				size: 10,
				current: 1,
				active: 0,
				list: [],
				list2: [],
				checked: false,
				checked2: false,
				pay: 0.00,
				detailMinNum: '',
				detailMaxNum: '',
				num: '',
				buyid: ''
			}
		},
		created() {

		},
		mounted() {
			this.getPay();
			this.getList(); // 商家订单 [预请求]
			this.getMyPay();
			this.getCon();
		},
		watch: {
			"result": function() { // 使用  watch 监听时候全选与取消全选
				if(this.result.length == this.list3.length) {
					this.checked = true;
				} else {
					this.checked = false;
				}
			},
			detailMinNum: function() {
				let detailMinNum = '' + this.detailMinNum;
			    detailMinNum = detailMinNum
			        .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
			        .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
			        .replace('.', '$#$')
			        .replace(/\./g, '')
			        .replace('$#$', '.')
			        .replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3'); // 只能输入四个小数
			    if (detailMinNum.indexOf('.') < 0 && detailMinNum != '') {
			        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
			        detailMinNum = parseFloat(detailMinNum);
			    }
			    this.detailMinNum = detailMinNum;
			},
			detailMaxNum: function() {
				let detailMaxNum = '' + this.detailMaxNum;
			    detailMaxNum = detailMaxNum
			        .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
			        .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
			        .replace('.', '$#$')
			        .replace(/\./g, '')
			        .replace('$#$', '.')
			        .replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3'); // 只能输入四个小数
			    if (detailMaxNum.indexOf('.') < 0 && detailMaxNum != '') {
			        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
			        detailMaxNum = parseFloat(detailMaxNum);
			    }
			    this.detailMaxNum = detailMaxNum;
			},
			num: function() {
				let num = '' + this.num;
			    num = num
			        .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
			        .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
			        .replace('.', '$#$')
			        .replace(/\./g, '')
			        .replace('$#$', '.')
			        .replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3'); // 只能输入四个小数
			    if (num.indexOf('.') < 0 && num != '') {
			        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
			        num = parseFloat(num);
			    }
			    this.num = num;
			},
			payPwd: function() {
				this.payPwd = this.payPwd.replace(/[^\d]/g, ''); // 只能输入数字
			}
		},
		methods: {
			getTab(type) {
				if(type == 0 || type == 1) {
					this.getPay();
					this.getMyPay();
					this.getCon();
				} else if(type == 2){
					this.getList();
				}
			},
			getCon() { // 查询 OTC 配置信息
				/**
				 * OTC订单买入单价(OTC_CONFIG_ORDER_BUY_UNIT_PRICE)
				 * OTC订单卖出单价(OTC_CONFIG_ORDER_SELL_UNIT_PRICE)
				 * OTC发布广告预留(OTC_CONFIG_ORDER_ADVERTISING_RESERVED)
				 */
				otc.getOtcConfig({
					"code": 'OTC_CONFIG_ORDER_BUY_UNIT_PRICE,OTC_CONFIG_ORDER_SELL_UNIT_PRICE,OTC_CONFIG_ORDER_ADVERTISING_RESERVED'
				}).then(res => {
					this.config = res.data;
				})
			},
			getPay() {
				otc.getPayType().then(res => {
					this.list2 = res.data;
					if(this.list2.Alipay) {
						this.list3 = ['2'];
					}
					if(this.list2.WX) {
						this.list3 = ['1'];
					}
					if(this.list2.Bank) {
						this.list3 = ['0'];
					}
					if(this.list2.Alipay && this.list2.WX) {
						this.list3 = ['2', '1'];
					}
					if(this.list2.Bank && this.list2.WX) {
						this.list3 = ['0', '1'];
					}
					if(this.list2.Alipay && this.list2.Bank) {
						this.list3 = ['2', '0'];
					}
					if(this.list2.Alipay && this.list2.WX && this.list2.Bank) {
						this.list3 = ['2', '1', '0'];
					}
				})
			},
			getMyPay() { // 获取我的钱包信息中的 可用数量
				otc.getWallet_coin({
					"accountTypeId": 3
				}).then(res => {
					this.pay = Number(res.data.availableNum).toFixed(2);
				})
			},
			getList() { // 进行中
				otc.getMyOrder({
					"size": this.size,
					"current": this.current,
					"type": '',
					"status": ''
				}).then(res => {
					this.list = res.data.records;
					this.listLength = res.data.records.length;
					this.total = res.data.total;
				})
			},
			onRefresh() {
				this.getList();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				if(this.total > this.listLength) {
					this.getList();
				}
				// 异步更新数据
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			},
			changeBox(type) {
				if(this.checked2 == true && this.checked3 == true && this.checked4 == true) {
					this.checked = true;
					this.checked2 = true;
					this.checked3 = true;
					this.checked4 = true;
				} else if(this.checked2 == false || this.checked3 == false || this.checked4 == false) {
					this.checked = false;
				}
			},
			clickBox(type) {
				if(type == 1 && this.checked == false) {
					this.checked = true;
					this.checked2 = true;
					this.checked3 = true;
					this.checked4 = true;
				} else if(type == 1 && this.checked == true) {
					this.checked2 = false;
					this.checked3 = false;
					this.checked4 = false;
				} else if(this.checked2 == true && this.checked3 == true && this.checked4 == true) {
					this.checked = true;
					this.checked2 = true;
					this.checked3 = true;
					this.checked4 = true;
				}
			},
			give() { // 转入
				this.$router.push({
					path: '/Transfer',
					query: {
						roid: 'MerchantOrder'
					}
				})
			},
			myChangeAll() { // 全选
				if(!this.checked) {
					this.result = this.list3;
				} else {
					this.result = [];
				}
			},
			buy(type) { // 出售 AIDT 的提交按钮
				if(!this.detailMinNum) {
					this.$toast("最小交易额不能为空！");
					return false;
				}
				if(!this.detailMaxNum) {
					this.$toast("最大交易额不能为空！");
					return false;
				}
				if(!this.num) {
					this.$toast("出售数量不能为空！");
					return false;
				}
				if(!this.result) {
					this.$toast("收款方式不能为空！");
					return false;
				}
				this.show3 = true;
				this.payPwd = '';
				this.buyid = type;
			},
			quit() { // 取消按钮
				this.show3 = false;
				this.payPwd = '';
			},
			isOk() {
				let resultType = String(this.result.join("-")); // 分割格式转换[支付账户]
				if(!this.detailMinNum) {
					this.$toast("最小交易额不能为空！");
					return false;
				}
				if(!this.detailMaxNum) {
					this.$toast("最大交易额不能为空！");
					return false;
				}
				if(!this.num) {
					this.$toast("出售数量不能为空！");
					return false;
				}
				if(!resultType) {
					this.$toast("收款方式不能为空！");
					return false;
				}
				if(!this.payPwd) {
					this.$toast("支付密码不能为空！");
					return false;
				}
				this.load = true;
				base.getCredentials().then(res => {
					this.k = res.data.k;
					this.v = res.data.v;
					otc.getCreate({
						"type": this.buyid,
						"detailMinNum": this.detailMinNum, // 最小交易数量
						"detailMaxNum": this.detailMaxNum, // 最大交易数量
						"num": this.num, // 数量
						"payChain": resultType, // 支付账户
						"password": this.rsaEncrypt(this.payPwd + ',' + this.v), // 支付密码
						"key": this.k
					}).then(res => {
						if(res.code == 200) {
							// 重置表单
							this.detailMinNum = '';
							this.detailMaxNum = '';
							this.num = '';
							resultType = '';
							this.result = []; // 重置页面的选择框
							this.payPwd = '';
							// 全部重新请求
							this.getPay();
							this.getList();
							this.getMyPay();
							this.getCon();
							/**
							 * 2019/06/24 11:18:55
							 * LYH 要求成功后跳页（已经再三确认）
							 */
							this.$router.push({
								path: 'Otc'
							})
						}
						this.$toast(res.msg);
						this.show3 = false;
						this.load = false;
					})
				})
			},
			quitOrder(item) { // 取消订单
				if(item.status == 1){
					Dialog.confirm({
						message: '是否取消当前上架中的订单？',
						confirmButtonText: '是',
						cancelButtonText: '否',
						cancelButtonColor: 'white'
					}).then(() => {
						otc.getCancel({
							"orderId": item.id,
						}).then(res => {
							this.$toast(res.msg);
							this.getList();
						})
					}).catch(() => {
						this.getList(); // 取消操作也需要重新查询
					});
				}else{
					this.$toast("只有上架中的订单才能取消！");
				}
			},
			nextUpdatePayPassword() { // 忘记支付密码
				this.$router.push({
					path: '/UpdateMb'
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-tabs__nav {
		background-color: transparent;
	}
	
	/deep/ .van-tabs__line {
		height: 2px;
		background-color: #47aa69;
	}
	
	/deep/ .van-card {
		background: rgb(36, 41, 62);
		color: white;
		border-radius: 5px;
	}
	
	/deep/ .van-card__price {
		display: initial;
	}
	
	/deep/ .van-cell {
		border-bottom: 1px solid rgb(76, 83, 106);
		background: #24293e;
		padding: 5px 0px;
	}
	
	/deep/ .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	/deep/ input {
		font-size: 12px;
	}
	
	/deep/ .van-hairline--top-bottom::after {
		border-color: rgb(133, 141, 172);
	}
	
	/deep/ .give.van-button {
		height: 24px;
		line-height: 22px;
		border-radius: 3px;
		background: rgb(95, 109, 145);
		border-color: rgb(95, 109, 145);
		color: white;
	}
	
	/deep/ .typeX .van-checkbox__label {
		color: white;
		margin-left: 3px;
		margin-top: 2px;
	}
	
	.typeX {
		display: block;
	}
	
	/deep/ .typeX .van-checkbox {
		padding-left: 10px;
		float: left;
	}
	
	/deep/ .typeX .van-checkbox__icon .van-icon {
		width: 1em;
		height: 1em;
		font-size: 0.9em;
	}
	
	/deep/ .typeX .van-checkbox__icon {
		margin-top: 5px;
	}
	
	/deep/ .van-field__body textarea::-webkit-input-placeholder {
		color: rgb(133, 141, 172)!important;
		font-size: 12px;
	}
	
	/deep/ .cvs.van-icon {
		position: absolute;
		top: 8px;
		right: -10px;
		color: rgb(133, 141, 172);
	}
	
	/deep/ .order.van-card {
		background: transparent;
		border-bottom: 1px solid rgb(76, 83, 106);
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
	}
	
	/deep/ .buyo.van-popup {
		background: rgb(34, 38, 56);
		color: white;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
	}
	
	/deep/ .buyo .van-button--small {
		margin-top: 0px;
	}
	
	/deep/ .buyo .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	/deep/ .buyo .van-button {
		height: 35px;
		line-height: 35px;
	}
	
	/deep/ .buyo .van-cell {
		padding: 10px 15px;
		border: 0;
	}
</style>